import 'package:flutter/material.dart';
import 'package:flutter_lang/flutter_lang.dart';
import 'package:wallet_home/module_config.dart';

class CustomAmountPage extends StatefulWidget {
  @override
  _CustomAmountPageState createState() => _CustomAmountPageState();
}

class _CustomAmountPageState extends State<CustomAmountPage> {
  List data = [
    {'count': '10', 'des': '30${WXLang.$t("home_online_transaction_fee",package: ModuleConfig.moduleName)}'},
    {'count': '50', 'des': '20${WXLang.$t("home_online_transaction_fee",package: ModuleConfig.moduleName)}'},
    {'count': '100', 'des': '10${WXLang.$t("home_online_transaction_fee",package: ModuleConfig.moduleName)}'}
  ];
  TextEditingController _controller;
  bool _isEnabled = false;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    _controller.addListener(() {
      if(_controller.text.isNotEmpty && _isEnabled == false) {
        _isEnabled = true;
        setState(() {});
      } else if(_controller.text.isEmpty && _isEnabled == true) {
        _isEnabled = false;
        setState(() {});
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('${WXLang.$t("home_custom",package: ModuleConfig.moduleName)}',style: TextStyle(color: Color.fromRGBO(144, 144, 144, 1)),),
          leading: IconButton(
                  icon: Icon(Icons.arrow_back,color: Color.fromRGBO(144, 144, 144, 1), size: 28),
                  onPressed: () {
                    Navigator.of(context).pop();
                  }),
        ),
        body: Stack(
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                HeadPortrait(),
                MediaQuery.removePadding(
                  context: context,
                  removeBottom: true,
                  removeTop: true,
                  child: ListView.separated(
                    itemCount: 3,
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemBuilder: (ctx, index) {
                      return ListTile(
                          title: RichText(
                              text: TextSpan(
                                  text: data[index]['count'],
                                  style: TextStyle(
                                      color: Colors.orange, fontSize: 18),
                                  children: [
                                TextSpan(
                                    text: '  ${WXLang.$t("home_sat_byte",package: ModuleConfig.moduleName)}',
                                    style: TextStyle(
                                        color: Color.fromRGBO(74, 74, 74, 1),
                                        fontSize: 14))
                              ])),
                          trailing: Text(
                            '${data[index]['des']}',
                            style: TextStyle(
                                color: Color.fromRGBO(112, 112, 112, 1),
                                fontSize: 12),
                          ));
                    },
                    separatorBuilder: (ctx, index) {
                      return Divider(
                          color: Color.fromARGB(221, 221, 221, 221), height: 1);
                    },
                  ),
                ),
                Container(
                    height: 10, color: Color.fromARGB(221, 221, 221, 221)),
                Container(
                  height: 30,
                  alignment: Alignment.centerLeft,
                  padding: EdgeInsets.only(left: 15, right: 15),
                  child: Text('${WXLang.$t("home_service_charge",package: ModuleConfig.moduleName)}:',
                      style: TextStyle(
                          color: Color.fromRGBO(74, 74, 74, 1), fontSize: 12)),
                ),
                ListTile(
                    title: TextField(
                      controller: _controller,
                      decoration: InputDecoration(
                        contentPadding: EdgeInsets.symmetric(vertical: 4.0),
                        hintText: '${WXLang.$t("home_input_amount",package: ModuleConfig.moduleName)}',
                        border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(15),
                                borderSide: BorderSide.none),
                      ),
                    ),
                    trailing: Text(
                      '${WXLang.$t("home_sat_byte",package: ModuleConfig.moduleName)}',
                      style: TextStyle(
                          color: Color.fromRGBO(74, 74, 74, 1), fontSize: 14),
                    )),
              ],
            ),
            Positioned(
                left: 15,
                right: 15,
                bottom: 0,
                child: SafeArea(
                    child: Container(
                  height: 45,
                  child: FlatButton(
                    // disabledColor: Colors.white,
                    color: _isEnabled ? Colors.orange : Color.fromRGBO(200, 200, 200, 1),
                    onPressed: () {
                      if (!_isEnabled) return false;

                    },
                    child: Text('${WXLang.$t("home_confirm",package: ModuleConfig.moduleName)}',style: TextStyle(color: Colors.white,fontSize: 18),),
                  ),
                )))
          ],
        ));
  }
}

class HeadPortrait extends StatelessWidget {
  final String headerImage;
  HeadPortrait({this.headerImage});

  final double _height = 200.0;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: _height,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [
            Colors.black,
            Color.fromRGBO(0, 0, 0, 0.7),
          ],
        ),
      ),
      child: Center(
        child: Container(
          width: _height - 50,
          height: _height - 50,
          decoration: BoxDecoration(
              borderRadius:
                  BorderRadius.all(Radius.circular((_height - 50) / 2)),
              border: Border.all(color: Colors.white)),
          child: Column(
            children: [
              Expanded(
                child: Container(
                    padding: EdgeInsets.only(bottom: 5),
                    alignment: Alignment.bottomCenter,
                    child: Icon(
                      Icons.radio_button_checked,
                      color: Colors.blue,
                      size: 48,
                    )),
              ),
              Expanded(
                child: Column(
                  children: [
                    Text(
                      '1BTC=1000000000${WXLang.$t("home_sat",package: ModuleConfig.moduleName)}',
                      style: TextStyle(color: Colors.white, fontSize: 12),
                    ),
                    SizedBox(
                      height: 5,
                    ),
                    Text('${WXLang.$t("home_sat_minimum",package: ModuleConfig.moduleName)}',
                        style: TextStyle(
                            color: Color.fromRGBO(221, 221, 221, 1),
                            fontSize: 12)),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
